<template>
  <div>
    <div v-if="shows == 'list'">
      <Header>
        <el-button size="small" type="primary" @click="add">
          新建视频
        </el-button>
      </Header>
      <Main :data="listData" :footer-lock="totals > 10">
        <el-table-column
          label="视频名称"
          align="center"
          property="title"
        ></el-table-column>
        <el-table-column label="视频封面" align="center">
          <template slot-scope="scope">
            <img
              :src="
                $store.state.qiniu + scope.row.cover + $store.state.imgRotate
              "
              class="coverList"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="视频权限"
          align="center"
          property="authority"
        ></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? "已上架" : "已下架" }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="250"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="getVDATA(scope.row.video_id)"
            >
              相关商品
            </el-button>
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.status == 1"
              @click="upDown(scope.row.video_id)"
            >
              上架
            </el-button>
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.status == 2"
              @click="upDown(scope.row.video_id)"
            >
              下架
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="edit(scope.row.video_id)"
            >
              编辑
            </el-button>
            <el-button size="mini" type="text" @click="del(scope.row.video_id)">
              删除
            </el-button>
          </template>
        </el-table-column>

        <Footer :total="totals">
          <el-pagination
            :page-size="10"
            layout="prev, pager, next"
            :total="totals"
            @current-change="changes"
          >
          </el-pagination>
        </Footer>
      </Main>
    </div>
    <Add v-if="shows == 'add'" :video-id="videoId" @out="out" />

    <el-dialog title="相关商品" :visible.sync="dialogVisibleShop" width="60%">
      <div class="shopList scrollbars">
        <div v-if="shopList.length > 0" class="shopList-box">
          <div
            v-for="(item, index) in shopList"
            :key="index"
            class="shopList-chlid"
          >
            <div class="shopList-chlid-img">
              <img
                :src="
                  $store.state.qiniu +
                    item.goods_cover.split(',')[0] +
                    $store.state.imgRotate
                "
                width="100%"
                height="100%"
              />
            </div>
            <div class="shopList-chlid-font">
              <div class="one">
                {{ item.goods_name }}
              </div>
              <div class="two">
                <span v-if="item.low_goods_price == item.up_goods_price"
                  >￥{{ item.low_goods_price }}</span
                >
                <span v-else
                  >￥{{ item.low_goods_price }} - ￥{{
                    item.up_goods_price
                  }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div v-else class="shopList-no">暂无商品</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { VIDEO_LIST, UPDOWN_VIDEO, DEL_VIDEO, VIDEO_DATA } from "../service";

export default {
  components: {
    Add: () => import("./form")
  },
  data() {
    return {
      shows: "list",
      listData: [],
      totals: 0,
      pages: 1,
      videoId: "",
      shopList: [],
      dialogVisibleShop: false,
      title: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    setItem(goodsId) {
      this.goods_ids = goodsId;
      this.shows = "add";
    },
    async upDown(videoId) {
      await UPDOWN_VIDEO({ video_id: videoId }).then(({ code, msg }) => {
        if (code === 200) {
          this.getList();
        }
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    },
    async del(videoId) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          DEL_VIDEO({ video_id: videoId }).then(({ code, msg }) => {
            if (code === 200) {
              this.getList();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    async getList() {
      await VIDEO_LIST({
        page: this.pages,
        pageshow: 10,
        title: this.title
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.listData = data.list;
          this.totals = data.count;
        } else {
          this.$message.error(msg);
          this.listData = [];
        }
      });
    },
    async getVDATA(videoId) {
      this.dialogVisibleShop = true;
      await VIDEO_DATA({ video_id: videoId }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.shopList = data.commodity_name;
        } else {
          this.$message.error(msg);
        }
      });
    },
    add() {
      this.shows = "add";
    },
    out() {
      this.shows = "list";
      this.videoId = "";
      this.getList();
    },
    edit(videoId) {
      this.videoId = videoId;
      this.shows = "add";
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.coverList {
  width: 50px;
  height: 50px;
  border-radius: 6px;
}
.shopList {
  height: 390px;
  border-radius: 6px;
  border: 10px solid #f2f2f2;
  margin-top: -10px;
  .shopList-no {
    height: 100%;
    font-size: 18px;
    text-align: center;
    line-height: 350px;
    color: #909399;
  }
  .shopList-box {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    height: 300px;
    .shopList-chlid {
      width: 22%;
      height: 90px;
      background: #ffffff;
      border: 1px solid #e2e2e2;
      border-radius: 10px;
      margin: 10px 10px 0 0;
      padding: 10px 0 0 10px;
      .shopList-chlid-img {
        width: 70px;
        height: 70px;
        overflow: hidden;
        border-radius: 10px;
        float: left;
      }
      .shopList-chlid-font {
        width: 50%;
        height: 70px;
        float: left;
        margin-left: 10px;
        overflow: hidden;
        .one {
          width: 100%;
          height: 38px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .two {
          width: 100%;
          height: 26px;
          line-height: 26px;
          color: #ff2525;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
